import { Avatar, Divider, Flex, Space, Statistic, Typography } from 'antd';
import { SystemOverview, UserActivity } from '../../types';
import { UserOutlined } from '@ant-design/icons';

interface DashboardHeaderProps {
  systemOverview?: SystemOverview;
  userActivity?: UserActivity;
  loading?: boolean;
}

export default function DashboardHeader({ systemOverview, userActivity, loading }: DashboardHeaderProps) {
  return (
    <Flex align="center" gap={16} wrap="wrap">
      <Flex flex="0 0 40px">
        <Avatar size="large" icon={<UserOutlined />} />
      </Flex>
      <Flex flex={1}>
        <div>
          <Typography.Title level={5}>你好，管理员，欢迎使用八方管家系统！</Typography.Title>
          <Typography.Text type="secondary">
            系统管理员<Divider type="vertical" />八方管家系统
          </Typography.Text>
        </div>
      </Flex>
      <Flex flex="0 0 auto" justify="flex-end">
        <Space size="large">
          <Statistic 
            title="用户总数" 
            value={systemOverview?.userCount || 0} 
            loading={loading} 
          />
          <Divider type="vertical" style={{ height: 40 }} />
          <Statistic 
            title="今日活跃" 
            value={userActivity?.dailyActive || 0} 
            loading={loading} 
          />
          <Divider type="vertical" style={{ height: 40 }} />
          <Statistic 
            title="物资总数" 
            value={systemOverview?.materialCount || 0} 
            loading={loading} 
          />
          <Divider type="vertical" style={{ height: 40 }} />
          <Statistic 
            title="跳闸记录" 
            value={systemOverview?.trippingRecordCount || 0} 
            loading={loading} 
          />
        </Space>
      </Flex>
    </Flex>
  );
}